<template>
  <div class="sidebar">
    <div class="sidebar_header">首页</div>
    <div class="sidebar_list">
      <el-menu :unique-opened="true" :class="collapse ? 'menu' : ''" mode="vertical" :collapse="collapse"
        :default-active="router.currentRoute.value.path" :collapse-transition="false" text-color="rgba(34,55,33,1)"
        active-text-color="#04be02" router="true">
        <!-- <el-menu :collapse="collapse" :default-active="currentPath" :collapse-transition="false"  router> -->
        <template v-for="item in menu_list" :key="item.path">
          <template v-if="!item.hidden">
            <!-- 一级菜单 -->
            <template v-if="hasOnlyChild(item.children)">
              <el-menu-item :index="item.children[0].path">
                <el-icon>
                  <component :is="item.meta && item.meta.icon" />
                </el-icon>
                <!-- <svg-icon :icon-name="item.meta.icon" class-name="aside-menu-svg menu-icon"></svg-icon> -->
                <!-- <svg-icon :icon-name="item.meta && item.meta.icon" class-name="aside-menu-svg"></svg-icon> -->
                <template #title>{{ item.children[0].meta && item.children[0].meta.title }}</template>
              </el-menu-item>
            </template>
            <!-- 子级菜单 -->
            <template v-else>
              <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path">
                <template #title>
                  <!-- <span icon="House"></span> -->
                  <!-- <el-icon><House /></el-icon> -->
                  <!-- <el-icon>
                <svg-icon :icon-name="item.meta.icon" class-name="aside-menu-svg menu-icon"></svg-icon>
              </el-icon> -->
                  <el-icon>
                    <component :is="item.meta && item.meta.icon" />
                  </el-icon>
                  <span>{{ item.meta && item.meta.title }}</span>
                </template>
                <template v-for="chid in item.children" :key="chid.path">
                  <el-menu-item v-if="!chid.hidden" :index="chid.path">
                    <!-- <svg-icon class-name="aside-menu-svg" :icon-name="chid.meta && chid.meta.icon" ></svg-icon> -->
                    <!-- <svg-icon icon-name="home" class-name="aside-menu-svg"></svg-icon> -->
                    {{ chid.meta && chid.meta.title }}
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: '',
  setup() {
    let router = useRouter()
    const data = reactive({
      menu_list: [],
      collapse: false,
    })
    const init = () => {
      const menuList = router.options.routes;
      data.menu_list = menuList.filter(item => {
        return item.path == '/admin'
      })
    }
    init()
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    //判断是否只有一个子级菜单
    const hasOnlyChild = (children) => {
      //不存在子路由
      if (!children) { return false; }
      //过滤hidden属性为true的路由储存路由
      const childRouter = children.filter(item => {
        return item.hidden ? false : true;
      })
      //只有一个子路由
      if (childRouter.length === 1) {
        return true;
      }
      //否则
      return false;
    }
    onMounted(() => {

    })
    return {
      ...toRefs(data),
      handleOpen,
      handleClose,
      router,
      hasOnlyChild
    }
  },
}

</script>
<style scoped lang='scss'>
.sidebar {
  width: 244px;
  margin-left: 0px;
  color: rgb(86, 90, 102);
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-shadow: 0.07143rem 0 0.42857rem rgba(0, 0, 0, .1);
  transition: all .25s ease-in-out;

  .sidebar_header {
    width: 100%;
    height: 4.28571rem;
    line-height: 4.28571rem;
    padding: 0 0.85714rem 0 1.71429rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.14286rem;
    color: #16171a;
    text-align: left;
  }

}

.sidebar_list {
  color: rgb(86, 90, 102);
  flex: 1 1;
  overflow-y: auto;
}
.sidebar_list{
  color: #16171a;
}
.el-menu{
  border-right: none;
}
.el-menu-item{
  padding-left: 65px !important;
}
</style>